<template>
  <div id="details">
    <el-form
      :model="details"
      :rules="rules"
      ref="details"
      label-width="100px"
      class="demo-details"
      enctype="multipart/form-data"
    >
      <el-form-item label="上传" prop="upload">
        <!-- elementUI 的上传组件  -->
        <el-upload
          ref="upload"
          action="http://192.168.1.148:8080/app/upload"
          :before-remove="bfRemove"
          :on-success="upSuccess"
          :data="params"
          :auto-upload="true"
          :limit="1"
          accept=".apk, .ipa"
        >
          <el-button size="small" type="primary" plain>点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传apk，ipa文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="隐藏提交的id" style="display:none;">
        <el-input v-model="details.id" type="hidden"></el-input>
      </el-form-item>
      <el-form-item label="应用名称" prop="appName">
        <el-input v-model="details.appName"></el-input>
      </el-form-item>
      <el-form-item label="包名" prop="packageName">
        <el-input v-model="details.packageName"></el-input>
      </el-form-item>
      <el-form-item label="应用id" prop="clientId">
        <el-input v-model="details.clientId"></el-input>
      </el-form-item>
      <el-form-item label="平台" prop="platform">
        <el-select v-model="details.platform">
          <el-option label="android" value="android"></el-option>
          <el-option label="ios" value="iOS"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版本号" prop="versionId">
        <el-input v-model="details.versionId"></el-input>
      </el-form-item>
      <el-form-item label="版本名称" prop="versionName">
        <el-input v-model="details.versionName"></el-input>
      </el-form-item>

      <el-form-item label="更新描述" prop="description">
        <el-input type="textarea" v-model="details.description"></el-input>
      </el-form-item>

      <el-form-item label="强制更新" prop="forceUpdate">
        <el-switch v-model="details.forceUpdate"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button @click="saveInfo('details')" type="primary">保存</el-button>
        <el-button @click="resetInfo('details')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      details: {
        id: "",
        appName: '',
        packageName: '',
        clientId: "",
        platform: "",
        versionId: "",
        versionName: "",
        description: "",
        forceUpdate: ""
      },

      rules: {
        appName: [
          { required: true, message: "请输入应用包名", trigger: "blur" }
        ],
        packageName: [
          { required: true, message: "请输入包名", trigger: "blur" }
        ],
        clientId: [
          { required: true, message: "请输入应用ID", trigger: "blur" }
        ],
        platform: [
          { required: true, message: "请选择平台", trigger: "change" }
        ],
        versionId: [
          { required: true, message: "请输入版本号", trigger: "blur" }
        ],
        versionName: [
          { required: true, message: "请输入版本名称", trigger: "blur" }
        ]
      },
      appInfo: [],
      // params: {
      //   appID: Number(this.$route.params.id)
      // }
    }
  },
  methods: {
    saveInfo: function (details) {
      this.$refs[details].validate(valid => {
        if (valid) {
          this.$http
            .put("app/one", this.details)
            .then(result => {
              var res = result.data.code
              var msg = result.data.message
              if (res == 3001) {
                this.$message.success({
                  message: msg,
                  duration: 1000,
                  center: true,
                  offset: 200
                })
                setTimeout(() => {
                  this.$router.push({
                    path: '/main/android',
                  })
                }, 1200);
              } else if (res == 3002) {
                this.$message.error({
                  message: msg,
                  duration: 1000,
                  center: true,
                  offset: 200
                })
              } else {
                this.$message.error({
                  message: msg,
                  duration: 1000,
                  center: true,
                  offset: 200
                })
              }
            })
          //this.$refs.upload.submit();
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    resetInfo: function (details) {
      this.$refs[details].resetFields()
    },
    getAppInfo: function () {
      var id = this.$route.params.id
      //console.log(id);
      this.$http
        .get("app/one", {
          params: { id: id }
        })
        .then(result => {
          //通过$http获取的数据，都在result.body中存放
          var result = result.body
          var appInfo = result.data
          if (result.code == "1001") {
            this.appInfo = appInfo
            this.details.id = appInfo.id
            this.details.appName = appInfo.appName
            this.details.packageName = appInfo.packageName
            this.details.clientId = appInfo.clientId
            this.details.platform = appInfo.platform
            this.details.versionId = appInfo.versionId
            this.details.versionName = appInfo.versionName
            this.details.description = appInfo.description
            this.details.forceUpdate = appInfo.forceUpdate
            //console.log(appInfo);
          } else {
            alert("获取失败")
          }
        });
    },
    bfRemove: function (file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    //upload 上传成功钩子
    upSuccess: function (res) {
      if (res.code == '14') {
        this.$message.success({
          message: res.message,
          duration: 1000,
          center: true,
          offset: 200
        })
      }else{
        this.$message.error({
          message: res.message,
          duration: 1000,
          center: true,
          offset: 200
        })
      }
    }
  },
  created: function () {
    this.getAppInfo()
  },
  computed: {
    params() {
      return {
        "id": this.details.id
      }
    }
  },
};
</script>
<style>
#details .el-form-item {
  width: 50%;
}

#details .el-upload__tip {
  display: inline-block;
  margin: 0 0 0 10px;
  color: #41423c;
}
.el-textarea > textarea {
  height: 100px;
  min-height: 50px;
}
</style>
